<template>
  <div>
    <div :id="echarts" :style="styles"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {countSchoolType} from "@/api/classai/countSchoolCity.ts";
  import {listData} from "@/api/system/dict/data";

  export default {
    name: 'index',
    props: {
      styles: {
        type: String,
        default: 'height:250px',
      },
      interval:{
        type:Number,
        default:0
      },
      seriesData: {
        type: Array,
        default: () => []
      },
      xAxis: {
        type: Array,
        default: () => []
      },
      echartsTitle: {
        type: String,
        default: ''
      },
      yAxisData: {
        type: Array,
        default: () => []
      },
      legendData: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        // styles: 'height:300px',
        infoLists: this.infoList,
        seriesArray: this.seriesData
      }
    },
    watch: {
      // seriesData: {
      //   handler(newVal, oldVal) {
      //     this.seriesArray = newVal;
      //     this.handleSetVisitChart();
      //   },
      //   deep: true // 对象内部属性的监听，关键。
      // }
    },
    computed: {
      echarts() {
        return 'echarts' + Math.ceil(Math.random() * 100)
      }
    },
    mounted: function () {
      const vm = this
      vm.$nextTick(() => {
        vm.getSchoolType();
        window.addEventListener('resize', this.wsFunc)
      })
    },
    methods: {
      getSchoolType() {
        countSchoolType().then(async res => {
          const queryParams = { pageNum: 1, pageSize: 10, dictType: "school_type", dictLabel: undefined, status: undefined }
          const ret = await listData(queryParams)
          res.data.forEach(it => {
            const obj = ret.rows.find(item => item.dictValue == it.type)
            if (obj) {
              it.type = obj.dictLabel
            }
          })
          this.handleSetVisitChart(res.data)
        })
      },
      wsFunc() {
        this.myChart.resize()
      },
      handleSetVisitChart(dataList) {
        this.myChart = echarts.init(document.getElementById(this.echarts))
        let option = null
        var legends = dataList.map(it => it.type);
        var colors = ['#0278e6', '#34d160', '#fcdf39', '#f19611', '#00c6ff', '#f76363'].reverse();
        var total = dataList.reduce((prev, curr) => prev + curr.number, 0);
        console.log(total)
        option = {
          backgroundColor: "#ffffff",
          color: colors,
          legend: {
            orient: 'vertical',
            top: "center",
            right: "0%",
            itemGap: 10,
            itemWidth: 16,
            itemHeight: 16,
            textStyle: {
              color: "#000000",
              fontSize: 16
            },
            data: legends,
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [{
            name: '学校类型',
            type: 'pie',
            radius: ['30%', '80%'],
            center: ['40%', '50%'],
            roseType: 'radius',
            minShowLabelAngle: 60,
            label: {
              show: true,
              normal: {
                position: 'outside',
                fontSize: 16,
                formatter: (params) => {
                  return params.name + '' + (params.value / total * 100).toFixed(2) + '%';
                }
              }
            },
            labelLine: {
              length: 1,
              length2: 20,
              smooth: true
            },
            data: dataList.map(it => {
              return {name: it.type, value: it.number}
            })
          }]
        };

        // 基于准备好的dom，初始化echarts实例
        this.myChart.setOption(option, true)
      },
      handleResize() {
        this.myChart.resize()
      }
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.wsFunc)
      if (!this.myChart) {
        return
      }
      this.myChart.dispose()
      this.myChart = null
    }
  }
</script>

<style scoped>

</style>
